<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>登录</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .van-divider {
            color: #000;
            margin-top: .49rem;
        }

        .login-form {
            width: 3rem;
            height: 2rem;
        }

        /*#tcaptcha_transform {*/
        /*    transform: scale(0.8);*/
        /*}*/
    </style>
</head>

<body>
    <div class="app page-container" v-cloak>
        <div class="login-bg">
            <div class="login">
                <div class="login-title">欢迎登录</div>
                <div class="login-item flex-x-sb">
                    <input type="tel" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号"
                        v-model="phone">
                </div>
                <div class="login-item flex-x-sb">
                    <input type="tel" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入验证码"
                        v-model="code" ref="codeText">
                    <div v-show="verifyTencent && (codeStatus == 1 || codeStatus == 3)" class="code"
                        id="TencentCaptcha">
                        {{codeStatus == 1?'获取验证码':'重新获取'}}
                    </div>
                    <div v-show="verifyGt && (codeStatus == 1 || codeStatus == 3)" class="code" id="captchaBox">
                        {{codeStatus == 1?'获取验证码':'重新获取'}}
                    </div>
                    <div class="code" v-show="codeStatus == 2">{{count}}s后重新获取</div>
                </div>
                <div id="captcha_register">

                </div>
                <div class="login-btn flex-x-c" @click="login">
                    <div>登录</div>
                </div>
                <div class="login-btn flex-x-c login-once" @click="oneLogin" v-if="isOneLogin&&isShowWallet">
                    <div>一键登录</div>
                </div>
                <van-divider v-if="isInstallQQ || isInstallWX">第三方登录</van-divider>
                <div class="login-third flex-x-c">
                    <img v-if="isInstallQQ" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/login/qq.png" alt="" @click="otherLogin(1)">
                    <img v-if="isInstallWX" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/login/weixin.png" alt="" @click="otherLogin(2)">
                </div>
                <div class="login-privacy flex-x-c" @click="showImgPriv = !showImgPriv">
                    <img :src="showImgPriv?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/edit_active.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/edit_no.png'" alt="">
                    登录即表示同意<span @click.stop="goPrivacy">铁蟹网隐私协议</span>
                </div>
            </div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/gt.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/TCaptcha.js"></script>
    <script>
        apiready = function () {
            var qq = api.require('QQPlus');
            var wx = api.require('wxPlus');
            vm = new Vue({
                el: '.app',
                data: {
                    active: 0,
                    showImgPriv: false,
                    phone: '',
                    code: '',
                    codeStatus: 1,
                    count: 59,
                    isInstallQQ: false,
                    isInstallWX: false,
                    isOneLogin: false,
                    // 设置   true 开启极验验证  否则开启腾讯
                    verifyGt: false,
                    verifyTencent: false,
                    isShowWallet:false,//是否一键登录开关，现用于一键登录
                },
                created: function () {
                    //this.initPrivacy();
                },
                mounted: function () {
                    this.verifyTencent = !this.verifyGt
                    this.initGT()
                    this.init007()
                    this.checkLogin()
                    this.getSystemSet()
                },
                methods: {
                    getSystemSet() {
                        var vm = this;
                        common('getSystemSet')({}, function (ret) {
                            //是否显示一键登录入口
                            if( api.appVersion === ret.data.appModifyVersion){
                                vm.isShowWallet = false
                            }else{
                                vm.isShowWallet = true
                            }

                        })
                    },
                    initPrivacy() {
                        const readPrivacy = $api.getStorage('readPrivacy');
                        if (readPrivacy && readPrivacy.appVersion == api.appVersion && readPrivacy.read) {
                            this.showImgPriv = true;
                        }
                    },
                    setPrivacy() {
                        const readPrivacy = {
                            read: true,
                            appVersion: api.appVersion
                        }
                        $api.setStorage('readPrivacy', readPrivacy);
                    },
                    checkLogin() {
                        var vm = this;
                        var aliATAuth = api.require('aliATAuthZiZhu');
                        aliATAuth.checkEnvAvailable(function (ret) {
                            console.log('一键:', JSON.stringify(ret));
                            if (ret.enable) {
                                vm.isOneLogin = true
                            } else {
                                // 不支持一键登入
                                vm.isOneLogin = false
                            }
                        });
                        qq.installed(function (ret, err) {
                            console.log('qq:', JSON.stringify(ret));
                            if (ret.status) {
                                vm.isInstallQQ = true
                            } else {
                                vm.isInstallQQ = false
                            }
                        });
                        wx.isInstalled(function (ret, err) {
                            console.log('wx: ', JSON.stringify(ret));
                            if (ret.installed) {
                                vm.isInstallWX = true
                            } else {
                                vm.isInstallWX = false
                            }
                        });
                    },
                    otherLogin(type) {
                        if (!this.showImgPriv) {
                            toastMiddle('请阅读并同意用户隐私')
                            return false;
                        }
                        if (type == 1) {
                            this.qqLogin()
                        } else {
                            this.wxLogin()
                        }
                    },
                    wxLogin() {
                        var vm = this
                        wx.isInstalled(function (ret, err) {
                            if (ret.installed) {
                                console.log("安装了")
                                wx.auth({
                                    // apiKey: ''
                                }, function (ret1, err1) {
                                    //微信授权成功
                                    if (ret1.status) {
                                        var param = {
                                            authType: "WE_CHAT",
                                            operationType: "ONE_KEY",
                                            platformType: "APP",
                                            code: ret1.code,
                                            openId: ret1.code
                                        }
                                        common("thirdLogin")(param, function (ret) {
                                            console.log(JSON.stringify(ret))
                                            // 0 绑定  1 登陆成功
                                            if (ret.data.status === 0) {
                                                vm.setPrivacy();
                                                api.openWin({
                                                    name: 'bind_phone_win',
                                                    url: 'bind_phone_win.html',
                                                    bounces: false,
                                                    pageParam: {
                                                        type: "WE_CHAT",
                                                        bindCode: ret.data.bindCode
                                                    }
                                                });
                                            }
                                            if (ret.data.status === 1 && ret.data.token) {
                                                $api.setStorage('accessToken', ret.data.token)
                                                api.setPrefs({
                                                    key: 'accessToken',
                                                    value: ret.data.token
                                                });
                                                vm.setPrivacy();
                                                api.sendEvent({
                                                    name: 'login',
                                                    extra: { key: ' value' }
                                                });
                                                api.closeWin();
                                            }
                                        })
                                    } else {
                                        console.log("-------")
                                        // alert(err.code);
                                    }
                                });
                            } else {
                                alert('当前设备未安装微信客户端');
                            }
                        });
                    },
                    qqLogin() {
                        var vm = this
                        qq.installed(function (ret, err) {
                            if (ret.status) {
                                qq.login({
                                    // apiKey:
                                }, function (ret1, err1) {
                                    if (ret1.status) {
                                        var param = {
                                            authType: "QQ",
                                            operationType: "ONE_KEY",
                                            platformType: "APP",
                                            accessToken: ret1.accessToken,
                                            openId: ret1.openId
                                        }
                                        common("thirdLogin")(param, function (ret) {
                                            // 0 绑定  1 登陆成功
                                            if (ret.data.status === 0) {
                                                api.openWin({
                                                    name: 'bind_phone_win',
                                                    url: 'bind_phone_win.html',
                                                    bounces: false,
                                                    pageParam: {
                                                        type: "QQ",
                                                        bindCode: ret.data.bindCode
                                                    }
                                                });
                                            }
                                            if (ret.data.status === 1 && ret.data.token) {
                                                $api.setStorage('accessToken', ret.data.token)
                                                api.setPrefs({
                                                    key: 'accessToken',
                                                    value: ret.data.token
                                                });
                                                vm.setPrivacy();
                                                api.sendEvent({
                                                    name: 'login',
                                                    extra: { key: ' value' }
                                                });
                                                api.closeWin();
                                            }
                                        })
                                    } else {
                                        console.log("-------")
                                        // alert(err.code);
                                    }
                                })
                            } else {
                                api.alert({ msg: "没有安装" });
                            }
                        });
                    },
                    initGT() {
                        var vm = this;
                        if (!vm.verifyGt) {
                            return false
                        }
                        fnGet(interfaces.GT_AUTH, {}, false, function (ret, err) {
                            if (ret && ret.code === RESPONSE_OK) {
                                ret.data = JSON.parse(ret.data)
                                console.log(JSON.stringify(ret.data))
                                initGeetest({
                                    // 以下配置参数来自服务端 SDK
                                    gt: ret.data.gt,
                                    challenge: ret.data.challenge,
                                    offline: !ret.data.success,
                                    new_captcha: ret.data.new_captcha,
                                    product: "bind", // 产品形式，包括：float，popup
                                }, function (captchaObj) {
                                    captchaObj.onReady(function () {
                                        console.info('geetest is ready')
                                        document.querySelector('#captchaBox').addEventListener("click", function () {
                                            if (!vm.checkPhoneNumber()) {
                                                return false
                                            }
                                            captchaObj.verify(); //显示验证码
                                        })
                                    }).onSuccess(function () {
                                        var result = captchaObj.getValidate();
                                        console.log("@@@" + JSON.stringify(result))
                                        if (!result) {
                                            return alert('请完成验证');
                                        }
                                        fnBodyPost(interfaces.POST_AUTH, {
                                            "geetest_challenge": result.geetest_challenge,
                                            "geetest_validate": result.geetest_validate,
                                            "geetest_seccode": result.geetest_seccode
                                        }, function (ret) {
                                            vm.getCode()
                                        })
                                    });
                                })
                            } else {
                                toastBottom(ret ? ret.msg : '')
                            }
                        })
                    },

                    goPrivacy: function (e) {
                        api.openWin({
                            name: 'common',
                            url: '../mine/common_win.html',
                            bounces: false,
                            pageParam: {
                                title: '隐私协议',
                                contentType: '2'
                            }
                        });
                    },

                    login() {
                        if (!this.showImgPriv) {
                            toastMiddle('请阅读并同意用户隐私')
                            return false;
                        }
                        if (!this.checkPhoneNumber()) {
                            return false
                        }
                        if (this.code == '') {
                            toastMiddle('请输入验证码')
                            return false;
                        }
                        this.codeLogin(this.phone, this.code)
                    },

                    // 检查手机号
                    checkPhoneNumber: function () {
                        if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
                            toastMiddle('请输入正确的手机号')
                            return false;
                        }
                        return true;
                    },

                    /**
                     * 腾讯防水墙验证
                     * @param randStr
                     * @param ticket
                     */
                    verify: function (randStr, ticket) {
                        let vm = this
                        if (!vm.checkPhoneNumber()) {
                            return false
                        }
                        fnGet(interfaces.TWF, { randStr: randStr, ticket: ticket }, false, (ret, err) => {
                            if (ret && ret.code === RESPONSE_OK) {
                                if (ret.data) {
                                    vm.sendCode(vm.phone)
                                } else {
                                    toastBottom('验证错误！')
                                }
                            } else {
                                toastBottom(ret ? ret.msg : '')
                            }
                        })
                    },

                    init007: function () {
                        let vm = this
                        if (!vm.verifyTencent) {
                            return false
                        }
                        //方法1: 直接生成一个验证码对象

                        let tct = new TencentCaptcha('2056551117', function (res) {
                            // 验证码的回调函数
                            if (res.ret === 0) {
                                // 票据
                                let ticket = res.ticket;
                                let randstr = res.randstr;
                                vm.verify(randstr, ticket)
                            }
                        }
                        );// 显示验证码
                        document.getElementById("TencentCaptcha").addEventListener("click", function () {
                            if (!vm.checkPhoneNumber()) {
                                return false
                            }
                            tct.show(); // 显示验证码
                        })
                    },

                    getCode: function () {
                        this.sendCode(this.phone)
                    },

                    // 发送验证码
                    sendCode: function (phone) {
                        const vm = this;
                        common("smsSendCode")("LOGIN", phone, null, function (ret) {
                            vm.codeStatus = 2
                            vm.$nextTick(() => {
                                vm.$refs.codeText.focus();
                            })
                            toastMiddle('获取验证码成功')
                            var timer = setInterval(() => {
                                vm.count--
                                if (vm.count <= 0) {
                                    clearInterval(timer)
                                    vm.codeStatus = 3
                                    vm.count = 59
                                }
                            }, 1000)
                        })
                    },
                    // 验证码登陆
                    codeLogin: function (phone, code) {
                        const param = {
                            authType: "PHONE",
                            code: code,
                            operationType: "LOGIN",
                            phone: phone,
                            platformType: "APP"
                        }
                        common("codeLogin")(param, function (ret) {
                            $api.setStorage('accessToken', ret.data)
                            api.setPrefs({
                                key: 'accessToken',
                                value: ret.data
                            });
                            vm.setPrivacy();
                            toastMiddle('登录成功，正在跳转！')
                            api.sendEvent({
                                name: 'login',
                                extra: { key: ' value' }
                            });
                            setTimeout(() => {
                                api.closeWin();
                            }, 800);
                        })
                    },
                    oneLogin() {
                        if (!this.showImgPriv) {
                            toastMiddle('请阅读并同意用户隐私')
                            return false;
                        }
                        var checkBoxIsChecked = false
                        const readPrivacy = $api.getStorage('readPrivacy');
                        if (readPrivacy && readPrivacy.appVersion == api.appVersion && readPrivacy.read) {
                            checkBoxIsChecked = true;
                        }
                        let params = {
                            checkBoxIsChecked: checkBoxIsChecked,
                            loginBtnText: '一键登录',
                            loginBtnColor: '#ffffff',
                            loginBtnSize: '17',
                            autoHideLoginLoading: false,
                            privacyOne: ["《隐私政策》", "https://www.tiexiemall.com/content/intro/3.html"],
                            // privacyTwo: ["《隐私政策》", "https://www.dzqh.com.cn/orient/html/activity/yinsibaohu.html"],
                            numberFontSize: '22',
                            sloganFontSize: '14'
                        };
                        let that = this;
                        oneClickLogin(params, function (msg) {
                            if (msg == 'success') {
                                vm.setPrivacy();
                                toastMiddle('登录成功，正在跳转！')
                                api.sendEvent({
                                    name: 'login',
                                    extra: { key: ' value' }
                                });
                                setTimeout(() => {
                                    api.closeWin();
                                }, 800);
                            } else {
                                toastMiddle('一键登录失败，请用手机号登录！')
                            }
                        })
                    }
                },
            })
            api.addEventListener({
                name: 'keyback'
            }, function (ret, err) {
                api.closeWin();
            });
        }
    </script>
</body>

</html>